"use client";
import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';
import { useEffect, useRef } from 'react';


export default function BlogForceGraph({graphData,showLabel}) {

    const router = useRouter();
  

    const ForceGraph3D = dynamic(
        () => import('react-force-graph').then(mod => mod.ForceGraph2D),
        {
            ssr: false, // 确保组件仅在客户端渲染
        }
    );
    const graphRef = useRef(null);

    function handleNodeClick(path){
        router.push("/blogs/"+path);
    }

    // const graphData = {
    //     "nodes": [
    //         { "id": "node1", "label": "Node 1", "value": 10, "group": 1 },
    //         { "id": "node2", "label": "Node 2", "value": 20, "group": 2 },
    //         { "id": "node3", "label": "Node 3", "value": 15, "group": 1 },
    //         { "id": "node4", "label": "Node 4", "value": 30, "group": 2 },
    //         { "id": "node5", "label": "Node 5", "value": 5, "group": 3 }
    //     ],
    //     "links": [
    //         { "source": "node1", "target": "node2" },
    //         { "source": "node1", "target": "node3" },
    //         { "source": "node2", "target": "node4" },
    //         { "source": "node3", "target": "node4" },
    //         { "source": "node5", "target": "node1" }
    //     ]
    // };
    // 自定义节点标签的渲染函数
    const safeNodeLabel = ({ node }) => {
        // 检查 node 是否是有效的对象
        console.log(node)
        return node ? node.id : 'Unknown';
    };


    return <>
        <div className='grid place-items-center' ref={graphRef}>
            <ForceGraph3D
                graphData={graphData}
                onNodeClick={node => handleNodeClick(node.path)}
                nodeLabel="label" // 使用自定义的节点标签渲染函数
                // nodeLabelPosition="right" // 标签位置，可以是 'left', 'right', 'top', 'bottom', 或一个函数返回 {x, y}
                nodeRelSize={6} // 节点大小，可以根据需要调整
                nodeCanvasObjectMode={() => "after"}
                linkWidth={4} // 链接宽度，可以根据需要调整
                width={900} // 设置 canvas 宽度为 800 像素
                height={600} // 设置 canvas 高度为 600 像素

                nodeCanvasObject={(node, ctx, globalScale) => {
                    const label = node.label;
                    const fontSize = node.isClusterNode
                        ? 14 * (node.val / 1500)
                        : 14 / (globalScale * 1.2);
                    ctx.font = `${fontSize}px Sans-Serif`;
                    ctx.textAlign = "center";
                    ctx.textBaseline = "middle";
                    ctx.fillStyle = "black"; //node.color;
                    if(showLabel){
                        ctx.fillText(label, node.x, node.y + 10);
                    }
                
                }}

                nodeVisibility={true}
                linkVisibility={true}
                enableNodeDrag={false}
                nodeAutoColorBy="group"
                linkDirectionalParticles={4}
                linkDirectionalParticleSpeed={0.01}
            />
        </div>

    </>
}